<template>
  <div>
    <!-- Title -->
    <div>
      <TitleCompound :title="title"></TitleCompound>
    </div>
    <!-- content -->
    <div>
      <!-- 基础描述 -->
      <div>
        <p>
          reactive 是响应式的基础，请查看
          <a href="https://cn.vuejs.org/api/reactivity-core.html#reactive">响应式基础</a>
          ，其返回一个对象的响应式代理。
        </p>
        <p>可以应用在：</p>
        <ul>
          <li>对象类型</li>
          <li>数组类型</li>
        </ul>
        <p>修改<b>reactive</b>对象时，需要使用<b>Object.assign(), 不可以直接等于。</b></p>
      </div>

      <!-- 对象类型 -->
      <div>
        <h3>对象类型</h3>
        <p>
          <el-icon v-if="person.gender === 'male'">
            <IconMale></IconMale>
          </el-icon>
          <el-icon v-else>
            <IconFemale></IconFemale>
          </el-icon>
          <span>{{ person.name }} - {{ person.age }}</span>
        </p>
        <el-button @click="changePersonAge" type="primary">Change Person Age</el-button>
        <el-button @click="changePersonGender" type="success">Change Person Gender</el-button>
        <el-table :data="Array(person)" stripe style="width: 80%">
          <el-table-column prop="name" label="Name" />
          <el-table-column prop="age" label="Age" />
          <el-table-column prop="gender" label="Gender" width="180" />
        </el-table>
        <p>
          修改名称：<el-input v-model="person.name" style="width: 240px" placeholder="Please input" />
        </p>

        <el-button @click="changePerson" type="primary">Change Person</el-button>
      </div>

      <!-- 数组类型 -->
      <div>
        <h3>数组类型</h3>
        <p>团队成绩列表</p>
        <el-button @click="addScore" type="primary">Add Score</el-button>
        <el-button @click="sortScores" type="success">Sort Scores</el-button>
        <div v-for="(score, index) in teamScores" :key="index">
          <span>第{{ index + 1 }}个成绩：{{ score }}</span>
        </div>

        <h3>对象数组类型</h3>
        <p>团队成员列表</p>
        <el-button @click="sortPersonAge" type="primary">Sort Person Age</el-button>
        <el-table :data="personList" stripe style="width: 80%">
          <el-table-column prop="name" label="Name" />
          <el-table-column prop="age" label="Age" />
          <el-table-column prop="gender" label="Gender" width="180" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import IconMale from '@/components/icons/IconMale.vue'
import IconFemale from '@/components/icons/IconFemale.vue'
import TitleCompound from '@/components/TitleCompound.vue'
import type { Person } from '@/types'
import { reactive } from 'vue'

const title = 'Reactive Quickstart'

// 对象
const person = reactive<Person>({
  name: 'John',
  age: 30,
  gender: 'male',
})

function changePersonAge() {
  person.age += 1
}

function changePersonGender() {
  person.gender = person.gender === 'female' ? 'male' : 'female'
}

function changePerson() {
  if (person.name === 'John') {
    Object.assign(person, {
      name: 'Jane',
      age: 25,
      gender: 'female',
    })
  }
  else {
    Object.assign(person, {
      name: 'John',
      age: 30,
      gender: 'male',
    })
  }
}

// 数组
const teamScores = reactive<number[]>([98, 91, 100, 89, 86, 99])

function addScore() {
  teamScores.push(Math.floor(Math.random() * 100))
}
function sortScores() {
  teamScores.sort((a, b) => b - a)
}

// 对象数组
const personList = reactive<Person[]>([
  {
    name: 'John',
    age: 30,
    gender: 'male',
  },
  {
    name: 'Jane',
    age: 25,
    gender: 'female',
  },
  {
    name: 'Jack',
    age: 35,
    gender: 'male',
  },
])

function sortPersonAge() {
  personList.sort((a, b) => b.age - a.age)
}
</script>

<style scoped></style>
